<template>
  <div class="addressEdit">
    <van-nav-bar title="地址管理" left-arrow @click-left="$router.go(-1)" />
    <div class="input">
        <van-field v-model="name" label="姓名" placeholder="收货人姓名" class="nameInput"  required maxlength="20"/>
        <van-field v-model="tel" label="电话" placeholder="收货人手机号" required maxlength="11"/>
        <van-field v-model="address" is-link readonly label="地区" placeholder="请选择所在地区" @click="show = true" required/>
        <van-field v-model="detail" label="详细地址" placeholder="街道门牌、楼房房间号等信息" class="detailInput" required maxlength="50"/>
    </div>
    <div class="saveDefault">
        <span>设为默认收获地址</span>
        <van-switch v-model="isDefault" size="28px"/>
    </div>
    <div class="saveButton">
        <button @click="saveAddress">保存</button>
    </div>

    <van-popup v-model="show" round position="bottom">
        <van-cascader
         v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            :field-names="fieldNames"
            @close="show = false"
            @finish="handleFinish"
        />
    </van-popup>
  </div>

</template>

<script>
import { addAddress, getAddress, updateAddress } from '@/api/user'

export default {
  data () {
    return {
      name: '',
      tel: '',
      detail: '',
      isDefault: false,
      show: false,
      cascaderValue: '',
      oldIsDefault: '',
      options: require('@/assets/address.json'),
      fieldNames: {
        text: 'name',
        value: 'code',
        children: 'children'
      },
      address: ''
    }
  },
  methods: {
    handleFinish ({ selectedOptions }) {
      this.show = false
      this.address = selectedOptions.map((option) => option.name).join('/')
    },
    async saveAddress () {
      const regex = /^1[3-9]\d{9}$/
      if (!regex.test(this.tel)) {
        this.$toast('手机号格式有误')
        return
      }
      if (this.name.trim() === '') {
        this.$toast('收货人姓名不能为空')
        return
      }
      if (this.address === '') {
        this.$toast('收货地址不能为空')
        return
      }
      if (this.detail === '') {
        this.$toast('详细地址不能为空')
      }
      if (this.$route.params.id === '0') {
        await addAddress(this.name, this.tel, this.address, this.detail, this.isDefault)
      } else {
        if (this.oldIsDefault === true && this.isDefault === false) {
          this.$toast('至少设置一个默认地址')
          return
        }
        await updateAddress(this.name, this.tel, this.address, this.detail, this.isDefault, this.$route.params.id)
      }
      this.$toast('保存成功')
      this.$router.back()
    }
  },
  async created () {
    if (this.$route.params.id === '0') {
      return
    }
    const res = await getAddress(this.$route.params.id)
    this.address = res.data.address
    this.detail = res.data.detail
    this.name = res.data.name
    this.tel = res.data.tel
    this.isDefault = res.data.isDefault
    this.oldIsDefault = res.data.isDefault
  }
}
</script>

<style scoped>
.addressEdit {
    background-color: #f7f8fa;
}
.input {
    padding: 20px;
}
.nameInput{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.detailInput{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.saveDefault {
    justify-content: space-between;
    align-items: center;
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 20px;
    margin: 20px;
    background-color: #ffffff;
    border-radius: 10px;
}
.saveDefault span {
    display: block;
    font-size: 15px;
    margin-left: 15px;

}

.saveButton {
    margin-top: 80px;
    margin-left: 20px;
    margin-right: 20px;
}

.saveButton button {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    text-align: center;
    border: none;
    border-radius: 20px;
    background-color: #ee0a24;
    color: #ffffff;
}
</style>
